<template>
    <div class="myIntegral">
        <div class="contentLeft">
            <router-link tag="div" to="/mine/myIntegralcontent">
                <div class="menuitem" :class="currIndex == '#/mine/myIntegralcontent' ? 'selected' : ''">
                    <img src="../../../static/image/menu.png" alt="">
                    <p> {{ $t('assemble.我的积分') }}</p>
                </div>
            </router-link>
            <router-link tag="div" to="/mine/exchangerecord">
                <div class="menuitem" :class="currIndex == '#/mine/exchangerecord' ? 'selected' : ''"> <img
                        src="../../../static/image/duihuan.png" alt="">
                    <p>{{ $t('assemble.商品兑换记录') }}</p>
                </div>
            </router-link>
            <router-link tag="div" to="/mine/voucher">
                <div class="menuitem" :class="currIndex == '#/mine/voucher' ? 'selected' : ''"> <img
                        src="../../../static/image/daijinquan.png" alt="">
                    <p>{{ $t('assemble.代金券兑换记录') }}</p>
                </div>
            </router-link>
            <router-link tag="div" to="/mine/cashList">
                <div class="menuitem" :class="currIndex == '#/mine/cashList' ? 'selected' : ''"> <img
                        src="../../../static/image/cash.png" alt="">
                    <p>{{ $t('assemble.现金兑换记录') }}</p>
                </div>
            </router-link>
        </div>
        <div class="contentRight">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pageInfo: {
                total: 0,
                page: 1,
                pageSize: 5
            },
            currIndex: "#/mine/myIntegralcontent"
        }
    },
    mounted() {
        this.currIndex = window.location.hash
        console.log("window", window.location.hash, this.currIndex)
    },

}
</script>
<style scoped lang="scss">
.myIntegral {
    // width: 1920px;
    width: 1440px;
    margin: 0 auto;
    display: flex;

    .contentLeft {
        width:270px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        padding-left: 7.5px;
        box-sizing: border-box;

        .menuitem {
            display: flex;
            align-items: center;
            width:270px;
            height: 53px;
            border-radius: 7.5px 7.5px 7.5px 7.5px;
            padding-left: 22.5px;
            box-sizing: border-box;
            cursor: pointer;
            margin-bottom: 15px;

            img {
                width: 18px;
                height: 18px;
            }
        }

        .selected {
            background: #EDF7FF;

        }
    }

    .contentRight {
        width: 1185px;
        background: #F7F8FA;
        padding: 15px;
        box-sizing: border-box;
    }
}
</style>